<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 80%;
            height: 40px;
            border: 1px solid #000;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        p {
            position: absolute;
            height: 38px;
            line-height: 38px;
        }

        button{
            width: 80px;
            height: 30px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 40px;
        }
    </style>
    <script>
         go = () => {
            let p1 = document.getElementById("p1");
            let p2 = document.querySelectorAll("#p2")[0];
            let n = 0;
            let mb=setInterval(()=>{
                n++;
                p1.style.width=n+"%";
                p1.style.background="orange";
                p2.innerHTML=n+"%";
                p2.style.color = "#ffffff";
                if (n===100){
                    clearInterval(mb);
                    location = "https://www.baidu.com"
                }
            },10);
        }
    </script>
</head>
<body>
<div class="box">
    <p id="p1"></p>
    <p id="p2"></p>
    <button onclick="go()">GO</button>

</div>
</body>
</html>